<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title>图片加载平移放大缩小示例</title>
    <link rel="stylesheet" href="http://www.ytbuyer.com/style/commons/reset.css">
    <link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="vendor/jquery/dist/jquery.js"></script>
    <script src="vendor/bootstrap/dist/js/bootstrap.js"></script>
    <script src="vendor/jquery-ui/jquery-ui.min.js"></script>
    <script src="js/index.js"></script>
</head>

<body class="wap-body">
     <div class="container-fluid">
         <h3></h3>
         <div class="col-lg-9">
             <div class="panel panel-default">
                 <div class="panel-heading">农场秀</div>
                 <div class="panel-body">
                     <div class="media">
                         <div class="media-left">
                             <a href="#">
                                 <img class="media-object img-thumbnail" src="./images/tit-img.png" alt="logo">
                             </a>
                         </div>
                         <div class="media-body wap-m-b">
                             <div class="form-group">
                                 <label class="control-label col-lg-2 col-sm-2 font-sml tit-lin text-center">农场秀标题：</label>
                                 <div class="input-group col-lg-6 col-sm-6">
                                     <input type="text" class="form-control" autocomplete="off" placeholder=""/>
                                 </div>
                             </div>

                             <div class="form-group">
                                 <label class="control-label col-lg-2 col-sm-2 font-sml tit-lin text-center">分享链接：</label>
                                 <div class="input-group col-lg-6 col-sm-6">
                                     <input type="text" class="form-control url-share" autocomplete="off" placeholder="" value="http://app.farmeasy.cn/digitalCard/DigitalCardEdit.seam?actionMethod=welCome.xhtml" readonly />
                                     <div class="input-group-btn"><button class="btn btn-default" id="copyUrl">复制链接</button></div>
                                 </div>
                             </div>

                             <div class="form-group">
                                 <label class="control-label col-lg-2 col-sm-2 font-sml tit-lin text-center">扫码分享：</label>
                                 <div class="input-group col-lg-6 col-sm-6">
                                     <img src="./images/ewm2.png">&nbsp;&nbsp;扫描二维码分享你的“农场秀”
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>

             <div class="panel panel-default">
                 <div class="panel-body">
                     <ul class="nav nav-tabs">
                         <li class="active"><a href="#farmMap" data-toggle="tab">农场地图</a></li>
                         <li><a href="#farmInfo" data-toggle="tab">农场简介</a></li>
                         <li><a href="#farmPro" data-toggle="tab">优质产品</a></li>
                     </ul>
                     <div class="tab-content">
                         <div class="tab-pane fade in active" id="farmMap">
                           <div class="col-lg-4">
                                <div class="configure"><span class="pull-right"><input type="checkbox"></span>默认地图全屏</div>
                           </div>
                             <div class="col-lg-4">
                                 <div class="configure"><span class="pull-right"><input type="checkbox"></span>显示天气数据</div>
                             </div>
                             <div class="col-lg-4">
                                 <div class="configure"><span class="pull-right"><input type="checkbox"></span>显示种植信息</div>
                             </div>
                             <div class="col-lg-4">
                                 <div class="configure"><span class="pull-right"><input type="checkbox"></span>显示农场全景影像</div>
                             </div>
                             <div class="col-lg-4">
                                 <div class="configure"><span class="pull-right"><input type="checkbox"></span>显示摄像头</div>
                             </div>
                             <div class="col-lg-4">
                                 <div class="configure"><span class="pull-right"><input type="checkbox"></span>显示物联网设备</div>
                             </div>

                             <hr class="configure-line"/>

                             <div class="col-lg-4">
                                 <div class="configure"><span class="pull-right"><input type="checkbox"></span>农场简介</div>
                             </div>
                             <div class="col-lg-4">
                                 <div class="configure"><span class="pull-right"><input type="checkbox"></span>农场图片</div>
                             </div>
                             <div class="col-lg-4">
                                 <div class="configure"><span class="pull-right"><input type="checkbox"></span>资质荣誉</div>
                             </div>
                             <div class="col-lg-4">
                                 <div class="configure"><span class="pull-right"><input type="checkbox"></span>优质产品</div>
                             </div>
                             <div class="col-lg-4">
                                 <div class="configure"><span class="pull-right"><input type="checkbox"></span>可供商品</div>
                             </div>
                             <div class="col-lg-4">
                                 <div class="configure"><span class="pull-right"><input type="checkbox"></span>联系我们</div>
                             </div>
                         </div>
                         <div class="tab-pane fade" id="farmInfo">
                             <h3></h3>
                            <form role="form">

                                <div class="form-row">
                                    <div class="col-lg-4">
                                        <label class="control-label col-lg-3 font-sml tit-lin text-right text-right">农场名称: &nbsp</label>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" />
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <label class="control-label col-lg-3 font-sml tit-lin text-right">联系人</label>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control" />
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <label class="control-label col-lg-3 font-sml tit-lin">联系方式</label>
                                        <div class="col-lg-9">
                                            <input type="text" class="form-control " />
                                        </div>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <label class="control-label col-lg-1 font-sml tit-lin text-right">农场介绍:</label>
                                    <div class="col-lg-9 tera-l">
                                        <textarea class="form-control" rows="6"></textarea>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <label class="control-label col-lg-1 font-sml tit-lin text-right">农场照片:</label>
                                    <ul class="col-lg-9 tera-l">
                                       <li class="col-lg-3 img-tab p-r">
                                           <img src="./images/vedio.png" width="160" height="110" class="img-thumbnail"/>
                                           <span class="p-a">大白菜出苗分植<br/>2017-06-31</span>
                                       </li>
                                        <li class="col-lg-3 img-tab p-r">
                                            <a href="javascript:;" class="a-upload nbg"><input type="file" name="" ></a>
                                        </li>
                                    </ul>
                                </div>

                                <div class="form-row">
                                    <label class="control-label col-lg-1 font-sml tit-lin text-right">荣誉资质:</label>
                                    <ul class="col-lg-9 tera-l">
                                        <li class="col-lg-3 img-tab p-r">
                                            <img src="./images/cert.png" width="89" height="120" class="img-thumbnail"/>
                                            <span class="p-a img-spa">黄瓜有机认证</span>
                                        </li>
                                        <li class="col-lg-3 img-tab p-r">
                                            <a href="javascript:;" class="a-upload nbg"><input type="file" name="" ></a>
                                        </li>
                                    </ul>
                                </div>

                                <div class="form-row">
                                    <label class="control-label col-lg-1 font-sml tit-lin text-right">&nbsp;</label>
                                    <div class="col-lg-9 tera-l">
                                        <button class="btn btn-lg btn-success">&nbsp;&nbsp;保存设置&nbsp;&nbsp;</button>&nbsp;&nbsp;
                                        <button class="btn btn-lg btn-default">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
                                    </div>
                                </div>

                            </form>
                         </div>
                         <div class="tab-pane fade" id="farmPro">
                             <span class="pull-right">
                                 <button class="btn btn-success"><i class="glyphicon glyphicon-plus"></i>&nbsp;添加优质产品</button>
                             </span>

                             <ul class="vegetables">
                                 <li class="media col-lg-4">
                                     <span class="media-left">
                                         <img src="./images/img-baicai.png" class="media-object img-thumbnail"/>
                                     </span>
                                     <div class="media-body media-w">
                                         <h4 class="media-heading">
                                             <span class="pull-right">
                                                 <i class="glyphicon glyphicon-pencil text-muted"></i>
                                                 <i class="glyphicon glyphicon-trash text-muted"></i>
                                             </span>
                                             草莓
                                         </h4>
                                         <div>
                                             <span class="badge badge-gr">追溯</span>
                                             <span class="badge badge-gr">有机</span>
                                             <span class="badge badge-gr">地理标识</span>
                                             <span class="badge badge-gr">原产地 </span>
                                         </div>
                                         <div class="text-muted">品种：</div>
                                         <div class="text-muted"> 产量：5000KG</div>
                                         <div class="text-muted"> 供应时间：2016年10月—2017年10月</div>
                                     </div>
                                 </li>
                                 <li class="media col-lg-4">
                                     <span class="media-left">
                                         <img src="./images/img-baicai.png" class="media-object img-thumbnail"/>
                                     </span>
                                     <div class="media-body media-w">
                                         <h4 class="media-heading">
                                             <span class="pull-right">
                                                 <i class="glyphicon glyphicon-pencil text-muted"></i>
                                                 <i class="glyphicon glyphicon-trash text-muted"></i>
                                             </span>
                                             草莓
                                         </h4>
                                         <div>
                                             <span class="badge badge-gr">追溯</span>
                                             <span class="badge badge-gr">有机</span>
                                             <span class="badge badge-gr">地理标识</span>
                                             <span class="badge badge-gr">原产地 </span>
                                         </div>
                                         <div class="text-muted">品种：</div>
                                         <div class="text-muted"> 产量：5000KG</div>
                                         <div class="text-muted"> 供应时间：2016年10月—2017年10月</div>
                                     </div>
                                 </li>
                                 <li class="media col-lg-4">
                                     <span class="media-left">
                                         <img src="./images/img-baicai.png" class="media-object img-thumbnail"/>
                                     </span>
                                     <div class="media-body media-w">
                                         <h4 class="media-heading">
                                             <span class="pull-right">
                                                 <i class="glyphicon glyphicon-pencil text-muted"></i>
                                                 <i class="glyphicon glyphicon-trash text-muted"></i>
                                             </span>
                                             草莓
                                         </h4>
                                         <div>
                                             <span class="badge badge-gr">追溯</span>
                                             <span class="badge badge-gr">有机</span>
                                             <span class="badge badge-gr">地理标识</span>
                                             <span class="badge badge-gr">原产地 </span>
                                         </div>
                                         <div class="text-muted">品种：</div>
                                         <div class="text-muted"> 产量：5000KG</div>
                                         <div class="text-muted"> 供应时间：2016年10月—2017年10月</div>
                                     </div>
                                 </li>
                                 <li class="media col-lg-4">
                                     <span class="media-left">
                                         <img src="./images/img-baicai.png" class="media-object img-thumbnail"/>
                                     </span>
                                     <div class="media-body media-w">
                                         <h4 class="media-heading">
                                             <span class="pull-right">
                                                 <i class="glyphicon glyphicon-pencil text-muted"></i>
                                                 <i class="glyphicon glyphicon-trash text-muted"></i>
                                             </span>
                                             草莓
                                         </h4>
                                         <div>
                                             <span class="badge badge-gr">追溯</span>
                                             <span class="badge badge-gr">有机</span>
                                             <span class="badge badge-gr">地理标识</span>
                                             <span class="badge badge-gr">原产地 </span>
                                         </div>
                                         <div class="text-muted">品种：</div>
                                         <div class="text-muted"> 产量：5000KG</div>
                                         <div class="text-muted"> 供应时间：2016年10月—2017年10月</div>
                                     </div>
                                 </li>
                             </ul>
                             <h3></h3>
                             <form role="form">
                                 <div class="form-row">
                                     <div class="col-lg-4">
                                         <label class="control-label col-lg-3 font-sml tit-lin text-right text-right">产品种类: &nbsp</label>
                                         <div class="input-group col-lg-9">
                                             <select class="form-control">
                                                 <option>草莓</option>
                                             </select>
                                         </div>
                                     </div>
                                     <div class="col-lg-4">
                                         <label class="control-label col-lg-3 font-sml tit-lin text-right">产品品种</label>
                                         <div class="input-group col-lg-9">
                                             <select class="form-control">
                                                 <option>牛奶草莓</option>
                                             </select>
                                         </div>
                                     </div>
                                     <div class="col-lg-4">
                                         <label class="control-label col-lg-3 font-sml tit-lin">产品标准</label>
                                         <div class="input-group col-lg-9">
                                             <select class="form-control">
                                                 <option>有机</option>
                                             </select>
                                         </div>
                                     </div>
                                 </div>

                                 <div class="form-row">
                                     <div class="col-lg-4">
                                         <label class="control-label col-lg-3 font-sml tit-lin text-right text-right">产量: &nbsp</label>
                                         <div class="input-group col-lg-9">
                                             <input type="text" class="form-control" />
                                             <div class="input-group-addon">kg</div>
                                         </div>
                                     </div>
                                     <div class="col-lg-4">
                                         <label class="control-label col-lg-3 font-sml tit-lin text-right">供应时间</label>
                                         <div class="input-group col-lg-9">
                                             <input type="date" class="form-control" />
                                             <div class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></div>
                                         </div>
                                     </div>
                                     <div class="col-lg-4">
                                         <label class="control-label col-lg-3 font-sml tit-lin">—</label>
                                         <div class="input-group col-lg-9">
                                             <input type="date" class="form-control" />
                                             <div class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></div>
                                         </div>
                                     </div>
                                 </div>

                                 <div class="form-row">
                                     <label class="control-label col-lg-1 font-sml tit-lin text-right">农场介绍:</label>
                                     <div class="col-lg-9 tera-l">
                                         <textarea class="form-control" rows="6"></textarea>
                                     </div>
                                 </div>

                                 <div class="form-row">
                                     <label class="control-label col-lg-1 font-sml tit-lin text-right">产品图片:</label>
                                     <ul class="col-lg-9 tera-l">
                                         <li class="col-lg-3 img-tab p-r">
                                             <img src="./images/vedio.png" width="160" height="110" class="img-thumbnail"/>
                                             <span class="p-a">大白菜出苗分植<br/>2017-06-31</span>
                                         </li>
                                         <li class="col-lg-3 img-tab p-r">
                                             <a href="javascript:;" class="a-upload nbg"><input type="file" name="" ></a>
                                         </li>
                                     </ul>
                                 </div>

                                 <div class="form-row">
                                     <label class="control-label col-lg-1 font-sml tit-lin text-right">产品认证:</label>
                                     <ul class="col-lg-9 tera-l">
                                         <li class="col-lg-3 img-tab p-r">
                                             <img src="./images/cert.png" width="89" height="120" class="img-thumbnail"/>
                                             <span class="p-a img-spa">黄瓜有机认证</span>
                                         </li>
                                         <li class="col-lg-3 img-tab p-r">
                                             <a href="javascript:;" class="a-upload nbg"><input type="file" name="" ></a>
                                         </li>
                                     </ul>
                                 </div>

                                 <div class="form-row">
                                     <label class="control-label col-lg-1 font-sml tit-lin text-right">产品指标:</label>
                                     <div class="col-lg-5">
                                         <label class="control-label col-lg-3 font-sml tit-lin text-right">外观</label>
                                         <div class="col-lg-9">
                                             <textarea class="form-control"></textarea>
                                         </div>
                                     </div>
                                     <div class="col-lg-5">
                                         <label class="control-label col-lg-3 font-sml tit-lin text-right">口感</label>
                                         <div class="col-lg-9">
                                             <textarea class="form-control"></textarea>
                                         </div>
                                     </div>
                                 </div>

                                 <div class="form-row">
                                     <label class="control-label col-lg-1 font-sml tit-lin text-right">&nbsp;</label>
                                     <div class="col-lg-5">
                                         <label class="control-label col-lg-3 font-sml tit-lin text-right">质量</label>
                                         <div class="col-lg-9">
                                             <textarea class="form-control"></textarea>
                                         </div>
                                     </div>
                                     <div class="col-lg-5">
                                         <label class="control-label col-lg-3 font-sml tit-lin text-right">质量</label>
                                         <div class="col-lg-9">
                                             <textarea class="form-control"></textarea>
                                         </div>
                                     </div>
                                 </div>

                                 <div class="form-row">
                                     <label class="control-label col-lg-1 font-sml tit-lin text-right">&nbsp;</label>
                                     <div class="col-lg-9 tera-l">
                                         <button class="btn btn-lg btn-success">&nbsp;&nbsp;保存设置&nbsp;&nbsp;</button>&nbsp;&nbsp;
                                         <button class="btn btn-lg btn-default">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
                                     </div>
                                 </div>


                             </form>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
         <div class="col-lg-3">
             <div class="panel panel-default">
                 <div class="panel-heading">实时预览</div>
                 <div class="panel-body text-center">
                     <div style="max-height: 100%; padding: 20px; box-sizing: border-box;display: block; padding-right: 0; height: 809px; ">
                         <iframe id="card_view" width="100%" height="100%" frameborder="0" style="background: #f1f1f1;" src="https://m.jd.com/"></iframe>
                     </div>
                 </div>
             </div>
         </div>

     </div>
</body>
</html>